{% load i18n %}
{% load compress %}
<!-- Modal -->
<div class="modal fade"  id="EditProfile" tabindex="-1" role="dialog" aria-labelledby="EditProfileLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">{% trans "Edit Profile"%}</h4>
            </div><!--modal-header -->

            <div class="modal-body">
                <ul class="nav nav-tabs">
                    <li><a href="#edit-profile" data-toggle="tab">{% trans "Edit Profile"%}</a></li>
                    <li><a href="#edit-password" data-toggle="tab">{% trans "Edit Password"%}</a></li>
                    <li><a href="#edit-email" data-toggle="tab">{% trans "Edit Email"%}</a></li>
                    <li><a href="#edit-billing_address" data-toggle="tab">{% trans "Edit Billing Address"%}</a></li>
                </ul>

            <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="edit-profile">
                        <form method="post" action="{% url 'geek-vpn-edit-profile' %}" id="edit-profile-form"  role="form" class="form-horizontal rich-top rich-bottom ajax-profile-form" >
                        {% csrf_token %}
                            {% for field in epf %}
                                <div class="form-group">
                                <label class="control-label col-md-4" for="{{ field.auto_id }}">{{ field.label }}</label>
                                    <div class="col-md-5">
                                    {{ field }}
                                    </div>
                                </div>
                            {% endfor %}
                            <div class="col-md-3"></div>
                            <div class="col-md-3 ">
                                <button class="btn btn-default btn-block">{%trans 'Update' %}</button>
                            </div>
                        </form>
                    </div><!--home -->

                    <div class="tab-pane fade" id="edit-password">

                        <form method="post" action="{% url 'geek-vpn-edit-password' %}" id="edit-password-form"   role="form" class="form-horizontal rich-top rich-bottom ajax-profile-form" >
                            {% csrf_token %}
                            {% for field in epassf %}
                                <div class="form-group">
                                <label class="control-label col-md-4" for="{{ field.auto_id }}">{{ field.label }}</label>
                                    <div class="col-md-5">
                                    {{ field }}
                                    </div>
                                </div>
                            {% endfor %}

                            <div class="col-md-3"></div>
                            <div class="col-md-3 ">
                                <button class="btn btn-default btn-block">{%trans 'Update' %}</button>
                            </div>
                        </form>
                    </div><!--password-->



                    <div class="tab-pane fade" id="edit-email">
                        <form method="POST"  id="edit-email-form"  action="{% url 'geek-vpn-edit-email' %}"  role="form" class="form-horizontal rich-top rich-bottom ajax-profile-form" >
                            {% csrf_token %}
                            {% for field in eef %}
                                <div class="form-group">
                                <label class="control-label col-md-4" for="{{ field.auto_id }}">{{ field.label }}</label>
                                    <div class="col-md-5">
                                    {{ field }}
                                    </div>
                                </div>
                            {% endfor %}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_email">Email Address</label>#}
{#                                <div class="col-md-5">#}
{##}
{#                                    <input id="id_email" class="form-control" type="email" value="liantian@188.com" name="email">#}
{#                                </div>#}
{#                            </div>#}
                            <div class="col-md-3"></div>
                            <div class="col-md-3 ">
                                <button class="btn btn-default btn-block">{%trans 'Update' %}</button>
                            </div>
                        </form>
                    </div><!--email-->


                    <div class="tab-pane fade" id="edit-billing_address">
                        <form method="POST"  id="edit-billing_address-form"  action="{% url 'geek-vpn-edit-billing_address' %}"  role="form" class="form-horizontal rich-top rich-bottom ajax-profile-form" >
                            {% csrf_token %}
                            {% for field in ebaf %}
                                <div class="form-group">
                                <label class="control-label col-md-4" for="{{ field.auto_id }}">{{ field.label }}</label>
                                    <div class="col-md-5">
                                    {{ field }}
                                    </div>
                                </div>
                            {% endfor %}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_country">Country</label>#}
{#                                <div class="col-md-5">#}
{#                                    <input id="id_country" class="form-control" type="text" value="" name="country">#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_province">Province</label>#}
{#                                <div class="col-md-5">#}
{#                                    <input id="id_province" class="form-control" type="text" value="" name="province">#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_city">City</label>#}
{#                                <div class="col-md-5">#}
{#                                    <input id="id_city" class="form-control" type="text" value="" name="city">#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_address">Address</label>#}
{#                                <div class="col-md-5">#}
{#                                    <input id="id_address" class="form-control" type="text" value="" name="address">#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_address2">Address2</label>#}
{#                                <div class="col-md-5">#}
{#                                    <input id="id_address2" class="form-control" type="text" value="" name="address2">#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_zipcode">ZipCode</label>#}
{#                                <div class="col-md-5">#}
{#                                    <input id="id_zipcode" class="form-control" type="text" value="" name="zipcode">#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="form-group">#}
{#                                <input id="user_id" value="{{ user.id }}" type="hidden">#}
{#                                <label class="control-label col-md-4" for="id_telephone">Telephone</label>#}
{#                                <div class="col-md-5">#}
{#                                    <input id="id_telephone" class="form-control" type="text" value="" name="telephone">#}
{#                                </div>#}
{#                            </div>#}
                            <div class="col-md-3"></div>
                            <div class="col-md-3 ">
                                <button class="btn btn-default btn-block">{%trans 'Update' %}</button>
                            </div>
                        </form>
                    </div><!--email-->



                </div><!--tab-content-->
            </div><!-- /.modal-body -->

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close"%}</button>
            {#        <button type="button" class="btn btn-primary">Save changes</button>#}
            </div><!-- /.modal-footer -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% compress js %}

<script type="text/javascript">

    //Email 认证

    $(document).ready(function(){

        $('#edit-email-form').validate(
        {
            rules: {
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "{% url 'geek-vpn-validation-email' %}",
                        type: "post"
{#                        data: {#}
{#                            user_id: function() {#}
{#                                return $( "#user_id" ).val();#}
{#                            }#}
{#                        }#}
                    }
                }
            },

            errorElement: 'span',
            errorClass:'help-block',
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready


</script>







<script type="text/javascript">

    //password 认证

    $(document).ready(function(){

        $('#edit-password-form').validate(
        {
            rules: {
                password : {
                    minlength : 8
                },
                password2 : {
                    equalTo : "#id_password",
                    minlength : 8

                }
            },

            errorElement: 'span',
            errorClass:'help-block',
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready


</script>


<script type="text/javascript">

    //profile 认证

    $(document).ready(function(){

        $('#edit-profile-form').validate(
        {
            rules: {
                first_name : {
                    required : true
                },
                last_name : {
                    required : true

                }
            },

            errorElement: 'span',
            errorClass:'help-block',
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready


</script>











<script type="text/javascript">

    //billing_address 认证

    $(document).ready(function(){

        $('#edit-billing_address-form').validate(
        {
            rules: {
                address : {
                    required : true
                },
                city : {
                    required : true

                },
                country : {
                    required : true

                },
                province : {
                    required : true

                },
                telephone : {
                    required : true

                },
                zipcode : {
                    required : true

                }
            },

            errorElement: 'span',
            errorClass:'help-block',
            highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function(element) {
            element

            .closest('.form-group').removeClass('has-error').addClass('has-success');
        }
        });
    }); // end document.ready


</script>
<script type="text/javascript">
    //  Ajax提交
    $(document).ready(function() {
        $('.ajax-profile-form').ajaxForm({
            dataType:  'json',
            success:    function(data) {
                if (data.status == true){ get_profile_content();
                $('#EditProfile').modal('hide');}
            }
        });
    });
</script>

{% endcompress %}